<template>
  <div class="tabs_com">
    <el-tabs v-model="tabsActiveName"
             @tab-click="handleClick"
             :stretch="false">
      <el-tab-pane name="recent"
                   label="Recently used">
        <cardList v-for="(item,index) in recentDataList" :item="recentDataList[index]" :configScript="configScript" :key="item.id"  ref="cardList"></cardList>
      </el-tab-pane>
      <el-tab-pane name="most"
                   label="Most commonly used">
        <cardList v-for="(item,index) in mostDataList" :item="mostDataList[index]" :configScript="configScript" :key="item.id"  ref="cardList"></cardList>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import cardList from './card.vue'
export default ({
  props: {
    recentDataList: {
      type: Array,
      default: function () {
        return []
      }
    },
    mostDataList: {
      type: Array,
      default: function () {
        return []
      }
    },
    configScript: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  components: {
    cardList
  },
  data: function () {
    return {
      tabsActiveName: 'recent'
    }
  },
  methods: {
    handleClick () {

    }
  }

})
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item {
  line-height: 20px !important;
}
::v-deep #tab-first {
  padding-left: 32px;
}
::v-deep #tab-third {
  padding-right: 32px;
}
.tabs_com ::v-deep .el-tabs__nav.is-stretch {
  height: 34px !important;
}
.tabs_com ::v-deep .el-tabs__nav-wrap::after {
  background-color: #e4e7ed;
}
.tabs_com ::v-deep .el-tabs__item.is-top {
  margin-top: 0;
  padding: 0 20px;
  height: 26px;
}

.tabs_com{
  .el-tabs {
     ::v-deep .el-tabs__header{
      padding: 0 !important;
      margin: 0;
    }
  }
}
</style>
